import React, { useEffect, useRef, useState } from "react";
import styles from "./XxProgressComponent1.module.scss";
import icon1 from "./icon-1.png"
import { Tooltip } from "antd";
import XxtvCard from "../../card/xxtv-card";
/**
 * 
 * @param {} param0 
 * @returns
 * @description 保费模块
 */
const XxProgressComponent1 = ({
    style = {}
}) => {
    // 目标是500万，只达成了381万
    const [state, setState] = useState({
        target: 500,
        actual: 381
    })



    return (
        <>
            <XxtvCard
                title="保费信息"
            >
                <div className={styles.center}>
                    {/* 车险保费 */}
                    <div className="car-riskMoney">
                        <div className="module-center">
                            <div className="module-title">
                                <div className="name">
                                    <span className="text">
                                        车险保费
                                    </span>
                                </div>
                            </div>
                            <div className="echart" id="echart" >
                                <div className="echart-content">

                                    <div className="circle-box">
                                        <div className="circle rotate360">
                                            <img className="image" src={icon1} alt="" />
                                        </div>
                                    </div>
                                    <div className="text-detail" >
                                        <span className="detail-item">
                                            <div className="other-text">
                                                <div className="content-item">
                                                    <span className="icon">新：</span>
                                                    <span className="text">129万</span>
                                                </div>
                                                <div className="content-item">
                                                    <span className="icon">续：</span>
                                                    <span className="text">129万</span>
                                                </div>
                                                <div className="content-item">
                                                    <span className="icon">转：</span>
                                                    <span className="text">129万</span>
                                                </div>
                                            </div>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            {/* 目标模块 */}
                            <div className="target-box">
                                <div className="target-box-center">
                                    <div className="word">
                                        <span className="">合计： {state.actual}万</span>
                                        <span className="">目标： {state.target}万</span>
                                    </div>
                                    <Tooltip title={`达成率：${(state.actual / state.target * 100)}%`}>
                                        <div className="chart">
                                            <div className="target-progress">
                                            </div>
                                            <div className="actual-progress" style={{ width: `${(state.actual / state.target * 100)}%` }}></div>
                                        </div>
                                    </Tooltip>

                                </div>
                            </div>

                        </div>
                    </div>
                    {/* 非车险保费 */}
                    <div className="car-riskMoney">
                        <div className="module-center">
                            <div className="module-title">
                                <div className="name">
                                    <span className="text">
                                        非车险保费
                                    </span>
                                </div>
                            </div>
                            <div className="echart" id="echart" >
                                <div className="echart-content">

                                    <div className="circle-box">
                                        <div className="circle rotate360">
                                            <img className="image" src={icon1} alt="" />
                                        </div>
                                    </div>
                                    <div className="text-detail" >
                                        {state.actual}万
                                    </div>
                                </div>
                            </div>
                            {/* 目标模块 */}
                            <div className="target-box">
                                <div className="target-box-center">
                                    <div className="word">
                                        <span className="">合计： {state.actual}万</span>
                                        <span className="">目标： {state.target}万</span>
                                    </div>
                                    <Tooltip title={`达成率：${(state.actual / state.target * 100)}%`}>
                                        <div className="chart">
                                            <div className="target-progress">
                                            </div>
                                            <div className="actual-progress" style={{ width: `${(state.actual / state.target * 100)}%` }}></div>
                                        </div>
                                    </Tooltip>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="car-riskMoney">
                        <div className="module-center">
                            <div className="module-title">
                                <div className="name">
                                    <span className="text">
                                        单均保费
                                    </span>
                                </div>
                            </div>
                            <div className="echart" id="echart" >
                                <div className="echart-content">
                                    <div className="circle-box">
                                        <div className="circle rotate360">
                                            <img className="image" src={icon1} alt="" />
                                        </div>
                                    </div>
                                    <div className="text-detail" >
                                        <span className="detail-item">
                                            <div className="other-text">
                                                <div className="content-item">
                                                    <span className="icon">新：</span>
                                                    <span className="text">129万</span>
                                                </div>
                                                <div className="content-item">
                                                    <span className="icon">续：</span>
                                                    <span className="text">129万</span>
                                                </div>
                                                <div className="content-item">
                                                    <span className="icon">转：</span>
                                                    <span className="text">129万</span>
                                                </div>
                                            </div>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div className="content">
                                <div className="content-center">
                                    <div className="content-border">
                                        <div>
                                            <span className="icon">车险单均：</span>
                                            <span className="text">129万</span>
                                        </div>
                                        <div>
                                            <span className="icon">非车险单均：</span>
                                            <span className="text">129万</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </XxtvCard>

        </>
    )
}
export default XxProgressComponent1